<template>
    <div class="listen-now">

        <div class="nav-buttons">
            <el-button class="nav-btn" round>歌手</el-button>
            <el-button class="nav-btn" round>排行榜</el-button>
            <el-button class="nav-btn" round>歌单分类</el-button>
            <el-button class="nav-btn" round>听书</el-button>
            <el-button class="nav-btn" round>音乐现场</el-button>
            <el-button class="nav-btn" round>会员专区</el-button>
        </div>

        <!-- VIP横幅 -->
        <div class="vip-banner">
            <div class="vip-content">
                <div class="vip-text">
                    <h3>领取VIP歌曲畅听福利</h3>
                    <p>赢了天听歌限定！播放效果轻松，有机会欣赏每周听奖享受</p>
                </div>
                <div class="vip-qrcode">
                    <div class="qrcode-placeholder"></div>
                    <p>手机打开播放音乐扫码参与</p>
                </div>
            </div>
        </div>

        <!-- 推荐内容 -->
        <div class="recommend-section">
            <h2 class="section-title">个性推荐</h2>
            <div class="recommend-cards">
                <div class="recommend-card">
                    <div class="card-cover" style="background-color: #ff4d4f;"></div>
                    <div class="card-title">抖音热歌</div>
                    <div class="card-desc">一键随心听</div>
                </div>
                <div class="recommend-card">
                    <div class="card-cover" style="background-color: #36cfc9;"></div>
                    <div class="card-title">热门榜</div>
                    <div class="card-desc">每日推荐</div>
                </div>
                <div class="recommend-card">
                    <div class="card-cover" style="background-color: #597ef7;"></div>
                    <div class="card-title">大家都在听</div>
                    <div class="card-desc">每日歌曲推荐</div>
                </div>
                <div class="recommend-card">
                    <div class="card-cover" style="background-color: #36cfc9;"></div>
                    <div class="card-title">怀旧90后</div>
                    <div class="card-desc">90后歌曲推荐</div>
                </div>
            </div>
        </div>

        <!-- 最新音乐 -->
        <div class="new-music-section">
            <h2 class="section-title">最新</h2>
            <div class="music-list">
                <div class="music-item" v-for="(item, index) in musicList" :key="index">
                    <div class="item-index">{{ index + 1 }}</div>
                    <div class="item-info">
                        <div class="item-title">{{ item.title }}</div>
                        <div class="item-artist">{{ item.artist }}</div>
                    </div>
                    <div class="item-duration">{{ item.duration }}</div>
                </div>
            </div>
        </div>

        <!-- 经典推荐 -->
        <div class="classic-section">
            <h2 class="section-title">经典 | 华语音乐的黄金时代</h2>
            <div class="classic-content">
                <div class="classic-cover"></div>
                <div class="classic-info">
                    <h3>伤感情歌：想说的话都在歌里</h3>
                    <div class="stats">
                        <span>14.1万</span>
                        <span>4.4万</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加音频播放器 -->
        <audio v-if="currentMusic" ref="audioPlayer" :src="currentMusic.src" autoplay @timeupdate="updateProgress"
            @ended="onEnded"></audio>
    </div>
</template>

<script>
export default {
    name: 'ListenNow',
    data() {
        return {
            currentMusic: null,
            isPlaying: false,
            musicList: [
                { title: '奢香夫人 - 凤凰传奇', artist: '凤凰传奇', duration: '04:19' },
                { title: '最新单曲1', artist: '歌手1', duration: '03:45' },
                { title: '最新单曲2', artist: '歌手2', duration: '03:22' },
                { title: '最新单曲3', artist: '歌手3', duration: '04:01' }
            ]
        };
    },
    methods: {
        // 添加播放相关方法
        play(music) {
            this.currentMusic = music;
            this.$nextTick(() => {
                this.$refs.audioPlayer.play();
                this.isPlaying = true;
            });
        },

        togglePlay() {
            if (this.isPlaying) {
                this.$refs.audioPlayer.pause();
            } else {
                this.$refs.audioPlayer.play();
            }
            this.isPlaying = !this.isPlaying;
        },

        updateProgress() {
            // 更新进度
        },

        onEnded() {
            // 播放结束处理
        }
    }
};
</script>

<style lang="scss" scoped>
.listen-now {
    .vip-banner {
        background-color: #ffe8e6;
        border-radius: 8px;
        padding: 15px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .vip-content {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;

            .vip-text {
                h3 {
                    margin: 0;
                    font-size: 16px;
                    color: #ec4141;
                }

                p {
                    margin: 5px 0 0;
                    font-size: 12px;
                    color: #666;
                }
            }

            .vip-qrcode {
                text-align: center;

                .qrcode-placeholder {
                    width: 50px;
                    height: 50px;
                    background-color: #ddd;
                    margin: 0 auto;
                    border-radius: 4px;
                }

                p {
                    margin: 5px 0 0;
                    font-size: 12px;
                    color: #666;
                }
            }
        }
    }

    .nav-buttons {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 20px;
        justify-content: center;
        /* 水平居中 */
        align-items: center;
        /* 垂直居中 */

        .nav-btn {
            padding: 8px 15px;
            font-size: 13px;
            white-space: nowrap;
            border-radius: 15px;
            border: 1px solid #ddd;
            background-color: #fff;
            color: #333;

            &:hover {
                background-color: #f5f5f5;
            }
        }
    }

    .recommend-section {
        margin-bottom: 30px;

        .section-title {
            font-size: 18px;
            margin: 15px 0;
            color: #333;
        }

        .recommend-cards {
            display: flex;
            gap: 15px;
            overflow-x: auto;
            padding-bottom: 10px;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */

            .recommend-card {
                flex: 0 0 150px;
                background-color: #fff;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

                .card-cover {
                    height: 150px;
                    background-size: cover;
                    background-position: center;
                }

                .card-title {
                    padding: 10px 10px 5px;
                    font-size: 14px;
                    font-weight: bold;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .card-desc {
                    padding: 0 10px 10px;
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }

    .new-music-section {
        margin-bottom: 30px;

        .section-title {
            font-size: 18px;
            margin: 15px 0;
            color: #333;
        }

        .music-list {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

            .music-item {
                display: flex;
                align-items: center;
                padding: 12px 15px;
                border-bottom: 1px solid #f5f5f5;
                cursor: pointer;

                &:hover {
                    background-color: #fafafa;
                }

                .item-index {
                    width: 30px;
                    text-align: center;
                    color: #999;
                    font-size: 14px;
                }

                .item-info {
                    flex: 1;
                    overflow: hidden;

                    .item-title {
                        font-size: 14px;
                        margin-bottom: 5px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .item-artist {
                        font-size: 12px;
                        color: #999;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .item-duration {
                    width: 50px;
                    text-align: right;
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }

    .classic-section {
        .section-title {
            font-size: 18px;
            margin: 15px 0;
            color: #333;
        }

        .classic-content {
            display: flex;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

            .classic-cover {
                width: 120px;
                height: 120px;
                background-color: #f0f0f0;
                flex-shrink: 0;
            }

            .classic-info {
                padding: 15px;
                flex: 1;

                h3 {
                    margin: 0 0 10px;
                    font-size: 16px;
                }

                .stats {
                    display: flex;
                    gap: 15px;
                    font-size: 12px;
                    color: #999;

                    span {
                        display: flex;
                        align-items: center;

                        &::before {
                            content: "♥";
                            margin-right: 5px;
                            color: #ec4141;
                        }

                        &:last-child::before {
                            content: "▶";
                        }
                    }
                }
            }
        }
    }
}
</style>